@babel/plugin-transform-destructuring

What is @babel/plugin-transform-destructuring?

The @babel/plugin-transform-destructuring npm package is a plugin for Babel, a JavaScript compiler, that enables the transformation of destructuring assignments and rest properties in JavaScript code. This allows for more concise and readable code, especially when dealing with objects or arrays. The plugin is part of the larger Babel ecosystem, which helps developers write next-gen JavaScript today.

What are @babel/plugin-transform-destructuring's main functionalities?

Object Destructuring

Transforms object destructuring syntax into a format that can be understood by environments that do not support ES2015 or later. This feature allows for extracting properties from objects and assigning them to variables in a single statement.

const { a, b } = { a: 1, b: 2 };

Array Destructuring

Enables transformation of array destructuring, which allows for a similar concise syntax for arrays as for objects, extracting values from arrays directly into variables.

const [a, b] = [1, 2];

Nested Destructuring

Supports nested destructuring, which is useful for extracting deeply nested properties or values from objects or arrays into variables at various levels of depth.

const { a: { b, c } } = { a: { b: 1, c: 2 } };

Default Values

Allows for setting default values in destructuring assignments, which is particularly useful when the expected property might not exist in the source object or array.

const { a = 10, b = 5 } = { a: 3 };

Other packages similar to @babel/plugin-transform-destructuring

babel-plugin-transform-es2015-destructuring

This package offers similar functionality to @babel/plugin-transform-destructuring but is specifically targeted at transforming ES2015 destructuring syntax. It's part of the older Babel 6 ecosystem and has been superseded by the more general @babel/plugin-transform-destructuring in Babel 7.

babel-preset-env

While not a direct equivalent, babel-preset-env includes @babel/plugin-transform-destructuring among many other plugins. It automatically determines the Babel plugins and polyfills you need based on your supported environments. It's a more comprehensive solution for writing next-gen JavaScript.

README

@babel/plugin-transform-destructuring

Compile ES2015 destructuring to ES5

See our website @babel/plugin-transform-destructuring for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-destructuring

or using yarn:

yarn add @babel/plugin-transform-destructuring --dev

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)